<template>
  <div class="list container">
    <wj-page-back content="精品案例"/>
    <wj-title title="案例列表"/>
    <ul v-if="exampleList.length > 0">
      <li v-for="item in exampleList" :key="item.id" class="item">
        <div class="left">
          <img :src="item.cover" alt="">
        </div>
        <div class="right pl-7">
          <div class="line-1">
            <span class="title">{{item.title}}</span>
            <span class="label" v-for="l in item.label" :key="l">{{l}}</span>
          </div>
          <div class="line-2">
            {{item.desc}}
          </div>
          <div class="line-3">
            <a :href="item.link" target="_blank">
              <el-button type="warning">在线试玩</el-button>
            </a>
            <a :href="item.download" :download="item.title">
              <el-button type="success">源码下载</el-button>
            </a>
          </div>
        </div>
      </li>
    </ul>
    <h4 v-else>

    </h4>
  </div>
</template>

<script>
  import wjPageBack from "@/components/wj-page-back";
  import wjTitle from "@/components/wj-title";
  import {exampleList} from "@/mock-data/exampleList";
  import {scrollAnimation} from "@/utils/scroll";

  export default {
    name: "ExampleList",
    data() {
      return {
        exampleList
      }
    },
    components: {
      wjPageBack,
      wjTitle
    },
    methods: {
      handleClick(link) {
        this.$router.push({
          path: link
        })
      }
    },
    created() {
      scrollAnimation(window.scrollY, 0);
    }
  }
</script>

<style scoped>
  .list {
    padding-top: 62px;
    min-height: 100vh;
  }

  .item {
    background: rgba(0, 0, 0, .1);
    margin: 30px 0;
    padding: 10px;
    display: flex;
    justify-content: start;
    align-items: start;
  }

  .item img {
    width: 150px;
    height: 150px;
  }

  .item .right {
    padding: 10px 20px;
  }

  .item .right .title {
    margin-right: 20px;
  }

  .right .label {
    color: #fff;
    padding: 2px 10px;
    margin: 0 10px;
    background: #c8c8c8;
    border-radius: 10px 10px 10px 0;
    font-size: 12px;
  }

  .right .line-2{
    color: #bbb;
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 30px;
  }

  .right .line-3 button{
    padding: 5px 8px;
    margin-right: 10px;
  }

</style>